<template>
	<view class="container">
		<u-navbar :custom-back="back" back-icon-color="#fff" :background="{background:'transparent'}"
		 :border-bottom="false"
		 title-color="#fff" title="酒店/住宿"></u-navbar>
		<Search></Search>
		<!-- 提示框 -->
		<u-toast ref="uToast" />
		<view class="cu-bar  padding-left-xs">
			<view class="action sub-title" style="margin: 0;">
				<text class="text-xxl text-bold text-yellow">附近推荐</text>
				<text class="bg-yellow" style="width:3rem"></text>
			</view>
		</view>
		<view class="flex card shadow-blur padding-xs flex-direction" v-for="(item,index) in hotelList" :key="index">
			<view class="cover">
				<u-image width="100%" height="600rpx" :src="item.pic"></u-image>
			</view>
			<view class="flex justify-between align-center padding-xs">
				<text class="text-xl text-bold">{{item.storeName}}</text>
			<!-- 	<view class="cu-capsule round"> 
					<view class="cu-tag bg-yellow "> 
						<text class="cuIcon-likefill text-red"></text> 
					</view> 
					<view class="cu-tag line-yellow"> 23 </view>
				</view> -->
				<view class="cu-tag bg-yellow round text-white margin-xs">
					{{item.status}}
				</view>
			</view>
			<view class="flex justify-between align-center padding-left-xs padding-right-sm">
				<text >{{item.address}}</text>
				<view class="cu-tag round  bg-cyan">{{item.director}}</view>
			</view>
			<view class="tag flex">
				<view class="cu-tag round margin-xs" :class="theme[index]" v-for="(tag,index) in item.facilityList" :key="index">
					{{tag}}
				</view>
			</view>
			<view class="solid-bottom"></view>
			<view class="flex align-center justify-between padding-xs">
				<text class="text-price text-bold text-red text-lg">160/晚</text>
				<view class="flex align-center">
					<u-icon class="padding-right-xs" name="phone-fill" color="#333" size="30"></u-icon>
					<text class="text-bold padding-right-xs">{{item.tel}}</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
// Math.floor(Math.random()*theme.length)随机返回主题颜色
const theme = ['bg-blue','bg-grey','bg-pink','bg-mauve','bg-purple','bg-blue','bg-cyan','bg-green','bg-olive','bg-yellow','bg-orange','bg-red'];
import Search from './components/search.vue'
import { mapGetters,mapActions } from 'vuex'
export default{
	components:{
		Search
	},
	computed:{
		...mapGetters(['getCity']),
	},
	data(){
		return{
			page:1,
			hotelList:[
				{
					pic:'https://source.unsplash.com/400x400/?hotel',
					facilityName:'安居客',
					storeName:'安居客',
					status:'营业中',
					facilityList:['空调','独立卫浴','独立卫生间','电视'],
					address:'正兴街',
					tel:'13888888888',
					director:'隔壁老王'
				},
			],//酒店列表
			theme:theme
		}
	},
	mounted() {
		this.getNearStore();
		// this.getHotel();
	},
	onReachBottom(){
		this.getList(this.currentCity);
	},
	// 下拉刷新
	onPullDownRefresh(){
		setTimeout(()=>{
			this.page = 1;
			uni.stopPullDownRefresh();
			this.$refs.uToast.show({
				title: '已更新',
				type: 'success',
			})
		}, 500);
	},
	methods:{
		back(){
			uni.switchTab({
				url:"/pages/index/index"
			})
		},
		getNearStore(){
			this.$api.getNearStore({
				page:this.page,
				areaName:this.getCity,
			}).then(res=>{
				if(res.data.code == 200){
					this.hotelList = res.data.data.list;
					this.hotelList.forEach((item,index)=>{
						// item.pic = `https://picsum.photos/seed/picsum/400/?random=${index}`;
						item.pic = `https://source.unsplash.com/400x400/?hotel`;
					})
					console.log("this.hotelList",this.hotelList)
				}
			})
		},
		getHotel(){
			this.$api.getHotel({
				areaName:this.getCity,
			}).then(res=>{
				console.log("res",res);
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.card{
	border-radius: 20rpx;
	width: 96vw;
	margin: 20rpx auto 40rpx;
	background-color: rgba(255,255,255,.9);
	box-shadow: 0 10rpx 20rpx 4rpx rgba(0,0,0,.1);
	height: auto;
}
.cover{
	border-radius: 20rpx;
	overflow: hidden;
	width: 100%;
	height: 600rpx;
}
.container{
	background: url(../../static/image/stay/stay1.jpg) no-repeat;
	background-size: 100% 100%;
	overflow: auto;
	height: 100vh;
}
</style>
